<template>
  <div class="boxss">
    <div class="titles">待办事项</div>
    <div class="grid flexa">
      <div @click="goLink('/tenantOrders/SaleOrderPage',{orderStatus:4},'orderForTenant:orderList',true)">
        <el-badge :value="todata.saleOrderTrade" :hidden="todata.saleOrderTrade==0" class="item grid-img">
          <div class="names-img">
            <img src="@/assets/img/index/comp5-1.png" alt="">
          </div>
        </el-badge>
        <div class="names">销售交易中</div>
      </div>
      <div @click="goLink('/recycleManage/recycleOrdersmyBuy',{orderStatus:1},'backOrder:orderList',true)">
        <el-badge :value="todata.backOrderTrade" :hidden="todata.backOrderTrade==0" class="item grid-img">
          <div class="names-img">
            <img src="@/assets/img/index/comp5-2.png" alt="">
          </div>
        </el-badge>
        <div class="names">回收交易中</div>

      </div>
      <div @click="goLink('/tenantOrders/SaleAfterOrder','','afterOrderForTenant:afterOrderList',true)">
        <el-badge :value="todata.saleOrderAfter" :hidden="todata.saleOrderAfter==0" class="item grid-img">
          <div class="names-img">
            <img src="@/assets/img/index/comp5-3.png" alt="">
          </div>
        </el-badge>
        <div class="names">销售售后</div>

      </div>
      <div @click="goLink('/recycleManage/backorderAfterList',{orderStatus:1},'backOrder:after',true)">
        <el-badge :value="todata.backOrderAfter" :hidden="todata.backOrderAfter==0" class="item grid-img">
          <div class="names-img">
            <img src="@/assets/img/index/comp5-4.png" alt="">
          </div>
        </el-badge>
        <div class="names">回收售后</div>
      </div>


      <div @click="goLink('/tenantGoods/goodsManage',{type:'myAccount',unsoldDays:'30'},'goodsManage',true)">
        <el-badge :value="todata.unsalableGoods" :hidden="todata.unsalableGoods==0" class="item grid-img">
          <div class="names-img">
            <img src="@/assets/img/index/comp5-5.png" alt="">
          </div>
        </el-badge>
        <div class="names">滞销商品</div>
      </div>
      <div @click="goLink('/tenantGoods/goodsCheck',{type:'check'},'goods:list:check',true)">
        <el-badge :value="todata.auditGoods" :hidden="todata.auditGoods==0" class="item grid-img">
          <div class="names-img">
            <img src="@/assets/img/index/comp5-6.png" alt="">
          </div>
        </el-badge>
        <div class="names">商品待审核</div>
      </div>
      <div @click="goLink('/tenantGoods/goodsManage',{type:'myAccount',saleState:5},'goodsManage',true)">
        <el-badge :value="todata.problemGoods" :hidden="todata.problemGoods==0" class="item grid-img">
          <div class="names-img">
            <img src="@/assets/img/index/comp5-7.png" alt="">
          </div>
        </el-badge>
        <div class="names">问题商品</div>
      </div>
      <div @click="goLink('/tenantUtils/jiankongfenzu','','jiankongfenzu',true)">
        <el-badge :value="todata.accountMonitor" :hidden="todata.accountMonitor==0" class="item grid-img">
          <div class="names-img">
            <img src="@/assets/img/index/comp5-8.png" alt="">
          </div>
        </el-badge>
        <div class="names">账号监控</div>
      </div>
    </div>


  </div>
</template>

<script>
import homeApi from "@/api/home/newIndex";

export default {
  data() {
    return {
      todata: {}
    }
  },
  mounted() {
    this.getTodo()
  },
  methods: {
    async getTodo() {
      let res = await homeApi.todo()
      this.todata = res.data
    },
    // 跳转链接
    goLink(val, query, permiStr, hasTimestamp = false) {
      if (val == "daishouwode") {
        this.getDaishouwode();
        return;
      }
      if (permiStr && !this.checkPermi([permiStr])) {
        return this.$message.error(
          "你还没有该模块权限，请联系管理员分配权限！"
        );
      }
      if (!val) {
        return;
      }
      // if (val == "/youzhishangjia") {
      //   return this.$message("正在优化中，请耐心等待...");
      // }
      if (val.indexOf("http") > -1) {
        window.open(val, "_blank");
      } else {
        if (hasTimestamp) {
          // 加时间戳
          const timestamp = new Date().getTime();
          this.$router.push({
            path: val,
            query: {
              ...query,
              timestamp,
            },
          });
        } else {
          this.$router.push({
            path: val,
            query: query || null,
          });
        }

      }
    },
  }
}

</script>
<style lang="scss" scoped>
@import url('./style.css');

.flexa {
  margin-top: 22px;

}

.grid {
  text-align: center;
  // grid-template-columns: repeat(auto-fit, minmax(130px, 4fr));
  grid-template-columns:repeat(4, 1fr);
  gap: 21px;

  > div {
    cursor: pointer;
    &:hover {
      .grid-img {
        border-radius: 12px;
        background: #e7e7e7;
        transform: translateY(-5px);
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
      }
    }
    .grid-img {
      transition: all 0.3s ease;
    }
  }
}

.names-img {
  width: 50px;
  margin: auto;

  img {
    width: 100%;

  }
}

.names {
  margin-top: 6px;
  font-size: 14px;
}

::v-deep .el-badge__content {
  background-color: #e02020;
  border: none;
  padding: 0px 5px;
}
</style>
